<template>
  <view>
     <view class="comments-buttom u-flex u-flex-between" :style="{bottom:bottom}">
      <input type="text"  @focus="inputFocus" @blur="inputBlur" :adjust-position="false" :placeholder="placeholder || '请输入评论...'" class="pinglun" confirm-type="send" :focus="focus" @input="contentss" v-model="contents">
      <view class="send" @click="comfrim(contents,isLogin)">发送</view>
    </view>
  </view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
export default {
  name: 'commentInput',
  props: {
    focus: {
      type: Boolean,
      default: false
    },
    placeholder: {
      type: [String],
      // default: '请输入评论...'
    }
  },
  computed:{
      ...mapGetters(['loginForm']),
      isLogin(){
       return this.loginForm.uid ? true : false
      }

  },
  components: {},
  
  data () {
    return {
      contents:'' ,
	    bottom:0
    }
  },
  created () {
  },
  methods: {
    contentss(e){
    let value =  e.detail.value
    this.contents = value
    },
    async comfrim(contents,isLogin){
			await this.loginValidate(); //登录
 
      this.$emit('click', contents)
      this.$emit('input', contents)
      this.contents = '' // 清空文本框 应避免让父组件执行清空 在子组件里主动在事件末尾清空
    },
	inputFocus(e){
		this.bottom = e.detail.height+'px' // 触发获取输入框焦点事件 就动态设置获取到的键盘高度值 将值赋给输入框的bottom
	},
	inputBlur(e){
		this.bottom = 0 // 失去焦点时 将值设为0
	}
  }
}
</script>

<style lang="scss" scoped>
.comments-buttom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 18rpx 32rpx 18rpx 20rpx;
  z-index: 999;
  background-color: #fff;
  border-top: 1rpx solid #e8e8e8;
  input {
    margin-bottom: 10rpx;
  }
}

.pinglun {
  background-color:#e8e8e8;
  width: 512rpx;
  height: 74rpx;
  border-radius:37rpx;
  padding-left: 37rpx;
  font-size: 26rpx;
}

.send {
  margin-bottom: 10rpx;
  width: 150rpx;
  height: 74rpx;
  margin-left: 30rpx;
  background-color: #765CFE;
  border-radius: 37rpx;
  color: #fff;
  font-size: 26rpx;
  text-align: center;
  line-height: 74rpx;
}
</style>
